<template>
  <div class="pos">
    <div v-show="loadding" class="loadding">
      <p>loadding 加载中。。。</p>
    </div>
    <el-row>
      <el-col :span="8" class="pos-order heightMax">
        <el-tabs type="border-card">
          <el-tab-pane label="点餐">
            <el-table :data="tableData">
              <el-table-column prop="goodsName" label="商品名称"></el-table-column>
              <el-table-column prop="price" label="价格" width="50"></el-table-column>
              <el-table-column prop="count" label="数量" width="100"></el-table-column>
              <el-table-column label="操作" width="150" fixed="right">
                <template slot-scope="scope">
                  <el-button type="text" size="small" @click="delSingleGoods(scope.row)">减少</el-button>
                  <el-button type="text" size="small" @click="addOrderList(scope.row)">增加</el-button>
                </template>
              </el-table-column>
            </el-table>

            <div class="total">
              <label>数量：<span>{{totalCount}}</span></label>
              <label>金额：<span>{{totalMoney}}</span>元</label>
            </div>
            <div class="goods-btn">
              <el-button type="warning" @click="accountPut">挂单</el-button>
              <el-button type="danger" @click="delAllGoods">删除</el-button>
              <el-button type="success" @click="checkOut">结账</el-button>
            </div>
          </el-tab-pane>
          <el-tab-pane label="账户流水">
            <div v-for="(item, index) in goodsStorage" :key="index">
              <div class="accountLog">第 {{index}} 单</div>
              <el-table :data="item">
                <el-table-column prop="goodsName" label="商品名称"></el-table-column>
                <el-table-column prop="price" label="价格" width="50"></el-table-column>
                <el-table-column prop="count" label="数量" width="100"></el-table-column>
              </el-table>
              <div class="accountLog-total">总计:
                ￥ {{goodsObj[index]}}
              </div>
            </div>

          </el-tab-pane>
          <el-tab-pane label="挂单">
            <div v-for="(item, index) in goodsPut" :key="index">
              <div class="accountLog">挂单编号 {{index}}</div>
              <el-table :data="item">
                <el-table-column prop="goodsName" label="商品名称"></el-table-column>
                <el-table-column prop="price" label="价格" width="50"></el-table-column>
                <el-table-column prop="count" label="数量" width="100"></el-table-column>
              </el-table>
              <div class="accountLog-total">总计:
                ￥ {{goodsPutObj[index]}}
              </div>
              <div class="goods-btn">
                <el-button type="warning" @click="goodsPutCheckOut(item, index)">结账</el-button>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-col>
      <!--商品展示-->
      <el-col :span="16">
        <div class="often-goods">
          <div class="title">商品名称</div>
          <div class="often-goods-list">
            <ul>
              <li v-for="goods in oftenGoods" @click="addOrderList(goods)">
                <span>{{goods.goodsName}}</span>
                <span class="o-money">￥{{goods.price}}元</span>
              </li>
            </ul>
          </div>
        </div>

        <div class="goods-details">
          <el-tabs>
            <el-tab-pane label="汉堡">
              <ul class="cookList">
                <li v-for="types in typeGoods[0]" @click="addOrderList(types)">
                  <span class="foodImg"><img :src="types.goodsImg" width="100%"></span>
                  <p class="foodName">{{types.goodsName}}</p>
                  <p class="foodPrice">￥{{types.price}}元</p>
                </li>
              </ul>
            </el-tab-pane>
            <el-tab-pane label="小食">
              <ul class="cookList">
                <li v-for="types in typeGoods[1]" @click="addOrderList(types)">
                  <span class="foodImg"><img :src="types.goodsImg" width="100%"></span>
                  <p class="foodName">{{types.goodsName}}</p>
                  <p class="foodPrice">￥{{types.price}}元</p>
                </li>
              </ul>
            </el-tab-pane>
            <el-tab-pane label="饮料">
              <ul class="cookList">
                <li v-for="types in typeGoods[2]" @click="addOrderList(types)">
                  <span class="foodImg"><img :src="types.goodsImg" width="100%"></span>
                  <p class="foodName">{{types.goodsName}}</p>
                  <p class="foodPrice">￥{{types.price}}元</p>
                </li>
              </ul>
            </el-tab-pane>
            <el-tab-pane label="套餐">
              <ul class="cookList">
                <li v-for="types in typeGoods[3]" @click="addOrderList(types)">
                  <span class="foodImg"><img :src="types.goodsImg" width="100%"></span>
                  <p class="foodName">{{types.goodsName}}</p>
                  <p class="foodPrice">￥{{types.price}}元</p>
                </li>
              </ul>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import axios from 'axios';

  export default {
    name: 'pos',
    data() {
      return {
        num1: 1,
        tableData: [],
        oftenGoods: [],
        typeGoods: [],
        totalMoney: 0,
        goodsStorage: [],
        goodsObj: [],
        totalCount: 0,
        goodsPut: [],
        goodsPutObj:[],
        loadding:true
      };
    },
    beforeCreate(){
      this.loadding=true;
    },
    created: function () {
      axios.all([axios.get('http://jspang.com/DemoApi/oftenGoods.php'), axios.get('http://jspang.com/DemoApi/typeGoods.php')])
        .then(axios.spread((acct, perms) => {
          this.oftenGoods = acct.data;
          this.typeGoods = perms.data;
          this.loadding=false;
        })).catch(error => {
        alert(error);
      })
    },
    methods: {
      addOrderList: function (goods) {

        // 判断列表中是否已有商品
        let isHave = false;
        for (let i = 0; i < this.tableData.length; i++) {
          if (this.tableData[i].goodsId === goods.goodsId) {
            isHave = true;
          }
        }

        // 根据判断处理逻辑
        if (isHave) {
          let arr = this.tableData.filter(o => o.goodsId === goods.goodsId);
          arr[0].count++;
        } else {
          let newGoods = {
            goodsId: goods.goodsId,
            goodsName: goods.goodsName,
            price: goods.price,
            count: 1
          };
          this.tableData.push(newGoods);
        }

        this.getAll();
      },
      delSingleGoods: function (goods) {
        goods.count--;
        if (goods.count <= 0) {
          this.tableData = this.tableData.filter(o => o.goodsId !== goods.goodsId);
        }
        this.getAll();
      },
      delAllGoods: function () {
        this.tableData = [];

        // 清0
        this.totalMoney = 0;
        this.totalCount = 0;
      },
      checkOut: function () {
        if (this.totalCount !== 0) {

          this.goodsStorage.push(this.tableData);
          this.goodsObj.push(this.totalMoney);
          this.$message.success('结账成功！收钱' + this.totalMoney);
          this.delAllGoods();
        } else {
          this.$message.error('购物车没商品哦！不能空结！');
        }
      },
      accountPut: function(){
        if (this.totalCount !== 0) {
          /**
           * 挂单： 将列表的数据存入变量，挂单后，相关数据清0，在到挂单去获取数据
           */
          this.goodsPut.push(this.tableData);
          this.goodsPutObj.push(this.totalMoney);
          this.$message.success('已放入挂单列表！');
          this.delAllGoods();
        }else {
          this.$message.error('购物车没商品哦！不能挂单！');
        }
      },
      goodsPutCheckOut: function(item, index){
        this.tableData = item;
        this.getAll();
        this.goodsStorage.push(this.tableData);
        this.goodsObj.push(this.totalMoney);
        this.$message.success('结账成功！收钱' + this.totalMoney);
        this.goodsPut.splice(index, index+1);
        this.goodsPutObj.splice(index, index+1);

        this.delAllGoods();
      },
      getAll: function () {
        //每次都先清0
        this.totalMoney = 0;
        this.totalCount = 0;

        this.tableData.forEach((element) => {
          this.totalCount += element.count;
          this.totalMoney += (element.price * element.count);
        })
      }
    }
  };
</script>

<style scoped>
  .loadding{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    background: #d1c6ff;
    font-size: 30px;
    font-weight: bold;
    z-index: 999;
    color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .pos {
    display: flex;
    position: relative;
  }

  .el-row {
    width: 100%;
  }

  .heightMax{
    max-height: 100vh;
    overflow: scroll;
  }

  .total {
    margin: 40px;
  }

  .pos-order {
    background-color: aliceblue;
    height: 100vh;
  }

  .goods-btn {
    margin-top: 20px;
    text-align: center;
  }

  .often-goods {
    background-color: azure;
  }

  .title {
    padding: 10px;
    border-bottom: 1px solid #95ccff;
  }

  .often-goods-list {
    padding: 10px;
  }

  .often-goods-list ul li {
    padding: 10px;
    font-size: 14px;
    margin-right: 20px;
    margin-bottom: 20px;
    display: inline-block;
    border: 1px solid #95ccff;
    background-color: #FFF;
  }

  .o-money {
    color: red;
  }

  .goods-details {
    padding: 10px;
  }

  .cookList li {
    list-style: none;
    width: 23%;
    border: 1px solid #E5E9F2;
    height: auto;
    overflow: hidden;
    background-color: #fff;
    padding: 2px;
    float: left;
    margin: 2px;

  }

  .cookList li span, p {
    float: left;
    padding-left: 10px;
  }

  .foodImg {
    width: 40%;
  }

  .foodName {
    font-size: 18px;
    padding-left: 10px;
    color: brown;

  }

  .foodPrice {
    font-size: 16px;
    padding-left: 10px;
    padding-top: 10px;
  }

  .accountLog {
    margin-top: 20px;
    background-color: forestgreen;
    color: #FFF;
    font-size: 16px;
    font-weight: bold;
    padding: 10px;
  }

  .accountLog-total {
    text-align: center;
    font-weight: bold;
    font-size: 18px;
    line-height: 36px;
  }
</style>
